<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" style="border:1px solid #CCC" ref="buttondiv">
          <div style="overflow-x: auto;width: 100%;min-width: 932px;">
              <div class="s-param">
                  <div class="s-title">仪器</div>
                  <div class="s-param__text">
                      <rm-ddl-instrument @change="yq_change" width="202px" v-model="instrid" prgno="LIS530" :clearable="true"></rm-ddl-instrument>
                  </div>

                  <div class="s-title">日期区间</div>
                  <div class="s-param__text">
                      <el-date-picker v-model="sel_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="yq_change"> </el-date-picker>至 <el-date-picker v-model="sel_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="yq_change"> </el-date-picker>
                  </div>
                  <div class="s-btn">
                      <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button>
                      <el-button icon="el-icon-sort" @click="popMultipleChk(sortstr,'sortstr',qcsortOption,'查询排序选择')">排序
                      </el-button>
                      <el-button @click="btnExport" icon="el-icon-download" v-has="'PEXPORT'">导出</el-button>
                  </div>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <rm-layout-left splitcolor="#ffffff" :splitwidth="5" :fixsize="300" :minfixsize="100" :maxfixsize="500">
              <template v-slot:fix>
                  <div style="height:100%;border:1px solid #CCC">
                      <div class="tabtop">
                          <div class="tab-title">质控项目列表</div>
                      </div>
                      <div class="datacenter">
                          <vxe-table ref="rptItemXTable" height="auto" border :loading="bQcItemLoading" :data.sync="qcItemData" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe header-align="center" @current-change="hospCurrentChange">
                              <vxe-table-column sortable field="rpt_itemname" title="项目名称" width="140"></vxe-table-column>
                              <vxe-table-column sortable field="rpt_itemcode" title="项目代码" width="100"></vxe-table-column>
                          </vxe-table>
                      </div>
                  </div>
              </template>
              <div style="height:100%;border:1px solid #CCC">
                  <div class="tabtop">
                      <div class="tab-title">原始数据
                      </div>
                  </div>
                  <div class="datacenter">
                      <vxe-table ref="resultXTable" height="auto" border :loading="bResultLoading" :data.sync="resultData" :keyboard-config="keyConfig" :keyboard-local-config="keyLocalConfig" size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe header-align="center" :row-class-name="ResultRowName" :span-method="colspanMethod" :tree-config="{children: 'children', expandAll: true, trigger: 'row'}">
                          <vxe-table-column sortable field="instrname" title="仪器" width="170"></vxe-table-column>
                          <vxe-table-column sortable field="qccnt" title="个数" width="40" align="center"></vxe-table-column>
                          <vxe-table-column sortable field="val" title="均值" width="70" :formatter="['toFixedString', 4]" header-align="center" align="right"></vxe-table-column>
                          <!-- //TODO <vxe-table-column sortable field="instrna" title="中位数" width="160"></vxe-table-column> -->
                          <vxe-table-column sortable field="sd" title="SD" width="70" header-align="center" align="right" :formatter="['toFixedString', 4]"></vxe-table-column>
                          <vxe-table-column sortable field="cv" title="CV" width="70" header-align="center" align="right" :formatter="['toFixedString', 4]"></vxe-table-column>
                          <vxe-table-column sortable field="qctea" title="Tea" width="70" header-align="center" align="right"></vxe-table-column>
                      </vxe-table>
                  </div>
              </div>
          </rm-layout-left>
          <!--多选弹窗--->
          <el-dialog width="900px" v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="multichktitle" :visible.sync="dialogMultipleVisible" :destroy-on-close="true">
              <rm-SqlMultiple :leftOption="option1" :rightOption="option2" :name="fieldname" @change="closedialog"></rm-SqlMultiple>
          </el-dialog>
      </div>
  </div>
</template>

<script>
import XE from "xe-utils";
XE.mixin({
  // 自定义全局的格式化处理函数
  formatSelect(cellValue, list) {
      let item = list.find((item) => item.value == cellValue);
      return item ? item.label : "";
  },
});
export default {
  name: "LIS551",
  data() {
      return {
          sel_startdt: XE.toDateString(new Date(), "yyyy-MM-01"),
          sel_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"),
          instrid: null,
          instrname: "",
          //* new
          //* 查询
          yearsOption: [],
          professgroup: "",
          //* 左侧-医院
          bQcItemLoading: false,
          qcItemData: [],
          //*右侧
          resultData: [],
          bResultLoading: false,
          //*vxe - 键盘事件
          keyLocalConfig: {
              isArrow: true,
          },
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
          },
          sdarea: "1",
          selrow: {},
          sortstr: "instrid,batchno,qclevel",
          qcsortOption: [
              { display: "仪器号", data: "instrid" },
              { display: "仪器名称", data: "instrname" },
              { display: "仪器型号", data: "instrserial" },
              { display: "批号", data: "batchno" },
              { display: "水平", data: "qclevel" },
          ],
          fieldname: "",
          currRowIndex: 0,
          multichktitle: "",
          txtreqdeptno: "",
          txtrptitem: "",
          option1: [],
          option2: [],
          dialogMultipleVisible: false,
      };
  },
  created() {
      this.getLoccalStorage();
      this.btnQuery();
  },
  mounted() {},
  methods: {
      getLoccalStorage() {
          let obj = localStorage.getItem("rm_Qmod_LIS551");
          if (obj != null && obj != "") {
              let jsondate = JSON.parse(obj);
              this.sortstr = jsondate.sortstr;
          }
      },
      setLocalSort() {
          let jsondate = { sortstr: this.sortstr };
          let modListJson = JSON.stringify(jsondate);
          if (localStorage.getItem("rm_Qmod_LIS551") != "" && localStorage.getItem("rm_Qmod_LIS551") != null) {
              localStorage.removeItem("rm_Qmod_LIS551");
          }
          localStorage.setItem("rm_Qmod_LIS551", modListJson);
      },
      popMultipleChk(e, fieldname, option, title) {
          let temp = XE.clone(option, true);
          this.option1 = [];
          this.option2 = [];
          if (e != "") {
              let k = e.split(",");
              k.forEach((item) => {
                  let ndata = temp.find((m) => m.data == item);
                  if (ndata != undefined && ndata != null) {
                      this.option2.push(ndata);
                  }
              });
              temp.forEach((item) => {
                  if (k.indexOf(item.data + "") < 0) {
                      this.option1.push(item);
                  }
              });
          } else {
              this.option1 = temp;
          }
          this.fieldname = fieldname;
          this.multichktitle = title;
          this.dialogMultipleVisible = true;
      },
      closedialog(value, name) {
          this[name] = value;
          this.setLocalSort();
          this.dialogMultipleVisible = false;
      },
      btnExport() {
          // let tableColumn = this.$refs.resultXTable.getColumns();
          // let extableColumn = [];
          // tableColumn.forEach((item) => {
          //     extableColumn.push({ title: item.title, field: item.property });
          // });
          var tempna = "LIS511 质控数据比对(按项目)";
          if (this.selrow.rpt_itemname != undefined) tempna += this.selrow.rpt_itemname + " ";
          if (this.selrow.sel_startdt != undefined && this.selrow.sel_enddt != undefined) tempna += this.selrow.sel_startdt + "~" + this.selrow.sel_enddt;
          // this.$pub.exportTableExcel(this.resultData, extableColumn, tempna+".xlsx");
          let options = {
              filename: tempna + ".csv",
          };
          this.$refs.resultXTable.exportCsv(options);
      },
      yq_change() {
          this.btnQuery();
      },
      clearTableData() {
          this.qcItemData = [];
          this.resultData = [];
      },
      async btnQuery() {
          this.bQcItemLoading = true;
          this.qcItemData = [];
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS5/LIS551",
                  method: "post",
                  data: {
                      action: "queryQcItem",
                      instrid: this.instrid,
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                  },
              });
              if (res) {
                  if (res.length > 0) {
                      this.qcItemData = res;
                      this.$refs.rptItemXTable.setCurrentRow(this.qcItemData[0]);
                      this.selrow = this.qcItemData[0];
                      this.btnQueryDetail(this.qcItemData[0]); //首次加载就要展示出质控项目和仪器了
                  } else {
                      this.qcItemData = [];
                      this.resultData = [];
                      this.selrow = {};
                  }
              }
              this.bQcItemLoading = false;
          } catch (e) {
              this.bQcItemLoading = false;
              this.qcItemData = [];
              this.resultData = [];
          }
      },
      hospCurrentChange({ row }) {
          this.selrow = row;
          this.btnQueryDetail(row);
      },
      AreaChange() {
          if (this.$refs.rptItemXTable.getCurrentRow()) {
              this.btnQueryDetail(this.$refs.rptItemXTable.getCurrentRow());
          }
      },
      //查询-原始数据
      async btnQueryDetail(str) {
          this.bResultLoading = true;

          this.resultData = [];
          var tempData = [];
          try {
              const res = await this.$tool.request({
                  url: "LIS/LIS5/LIS551",
                  method: "post",
                  data: {
                      action: "queryResult",
                      rpt_itemcode: str.rpt_itemcode,
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      sortstr: this.sortstr,
                  },
              });
              if (res) {
                  if (res.length > 1) {
                      if (this.sdarea == "2") {
                          res.forEach((e) => {
                              if (e.cp_sd < 2) {
                                  tempData.push(e);
                              }
                          });
                      } else if (this.sdarea == "3") {
                          res.forEach((e) => {
                              if (e.cp_sd < 3) {
                                  tempData.push(e);
                              }
                          });
                      } else {
                          tempData = res;
                      }
                      //统计个数
                      var sorta = 0;
                      var numa = 0;
                      var numb = 0;
                      var lasttitlerow = 0;
                      for (var i = 0; i < tempData.length; i++) {
                          if (i != 0) {
                              if (tempData[i].instrname.indexOf("批号") > -1) {
                                  //找到列头了
                                  sorta = 0;
                                  numb = i;
                                  for (var k = numa; k < numb; k++) {
                                      sorta += XE.toInteger(tempData[k]["qccnt"]);
                                  }
                                  numa = numb;
                                  tempData[lasttitlerow]["instrname"] += " 个数：" + sorta;
                                  lasttitlerow = i;
                              }
                          }
                          if (i == tempData.length - 1) {
                              sorta = 0;
                              numb = i;
                              for (var k = numa; k < numb; k++) {
                                  sorta += XE.toInteger(tempData[k + 1]["qccnt"]);
                              }
                              numa = numb;
                              tempData[lasttitlerow]["instrname"] += " 个数：" + sorta;
                              lasttitlerow = i;
                          }
                      }
                      var tempData2 = [];
                      var titlek = 0;
                      //转为树组件
                      for (var k = 0; k < tempData.length; k++) {
                          if (tempData[k].instrname.indexOf("批号") > -1) {
                              tempData[k].children = [];
                              tempData2.push(tempData[k]);
                              titlek++;
                          } else {
                              tempData2[titlek - 1].children.push(tempData[k]);
                          }
                      }
                      this.resultData = tempData2;
                      if (this.resultData.length > 0) {
                          this.$refs.resultXTable.setCurrentRow(this.resultData[1]);
                      } else {
                          this.resultData = [];
                      }
                  } else {
                      this.resultData = [];
                  }
                  this.bResultLoading = false;
              }
          } catch (e) {
              this.resultData = [];
              this.bResultLoading = false;
          }
      },
      //查询条件更改 清空数据
      ClsData() {
          this.qcItemData = [];
          this.resultData = [];
          this.$refs.rptItemXTable.loadData(this.qcItemData);
          this.$refs.resultXTable.loadData(this.resultData);
      },
      //项目名CLASS
      ResultRowName({ row }) {
          if (row.instrname.indexOf("批号") > -1) {
              return "rptnahead";
          }
      },
      //关闭按钮
      BtnExc() {
          let index = this.$parent.$refs.itemtags.tagsList.findIndex((m) => m.name == "LIS551");
          this.$parent.$refs.itemtags.tagsList.splice(index, 1);
          this.$router.go(-1);
      },
      colspanMethod({ row, rowIndex, column, columnIndex, data }) {
          if (row.instrname.indexOf("批号") > -1) {
              if (column.property == "instrname") {
                  return {
                      rowspan: 1,
                      colspan: 8,
                  };
              } else {
                  return {
                      rowspan: 0,
                      colspan: 0,
                  };
              }
          } else {
              // return {
              //     rowspan: 0,
              //     colspan: 0,
              // };
          }
      },
  },
};
</script>

<style scoped>
table {
  font-size: 12px;
  width: 100%;
  border-spacing: 5px;
}
.pagetop {
  width: 100%;
  height: 42px;
  border: 1px solid #ccc;
  position: absolute;
  font-size: 12px;
  padding: 3px;
  line-height: 26px;
  overflow-x: auto;
  overflow-x: overlay;
}
.pagecenter {
  position: absolute;
  top: 44px;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 3px;
  overflow: auto;
}
.tabtop {
  width: 100%;
  height: 26px;
  line-height: 26px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  white-space: nowrap;
}
.datacenter {
  position: absolute;
  top: 30px;
  width: 100%;
  left: 0;
  bottom: 5px;
}
.tab-title {
  margin: 0;
  font-size: 13px;
  /* margin: 0 1px 0 3px; */
  padding: 0 1px 0 3px;
  font-weight: 600;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
::v-deep tr.vxe-body--row.row--current {
  color: #000000;
  font-weight: bold;
}
::v-deep .vxe-table .vxe-cell {
  white-space: normal;
  word-break: break-word;
  padding: 0 5px;
}
::v-deep .el-checkbox__label {
  display: inline-block;
  padding-left: 3px;
  line-height: 19px;
  font-size: 12px;
}
::v-deep .vxe-table--header .vxe-header--column {
  border-right: 1px solid #1a8a8c;
  border-bottom: 1px solid rgb(204, 204, 204);
}
.s-param {
  display: flex;
}
.s-title {
  margin: 0 1px 0 3px;
  font-size: 12px;
  text-align: right;
}
.s-param__text {
  margin: 0 10px 0 5px;
}
.s-btn {
  margin: 5px 5px 0 0;
  text-align: right;
}
.s-param .el-input--small .el-input__inner {
  height: 30px !important;
  line-height: 26px !important;
}
::v-deep .rptnahead {
  font-weight: bold;
  background-color: rgb(169, 169, 169) !important;
  /* background-image: linear-gradient(rgb(250, 189, 110), NavajoWhite); */
  /* background-image: linear-gradient(rgb(189, 187, 187),DarkGray,rgb(189, 187, 187)); */
  background-image: linear-gradient(rgb(172, 172, 172), DarkGray, rgb(172, 172, 172));
  /* border-right:5px rgb(151, 26, 26) !important;; */
}
::v-deep.vxe-table .vxe-cell {
  width: 100% !important;
  white-space: normal;
  word-break: break-word;
  padding: 0 5px;
}
::v-deep .vxe-table .vxe-body--row.rptnahead.row--current td {
  /* background-image: linear-gradient(rgb(250, 189, 110), NavajoWhite)!important; */
  background-image: linear-gradient(rgb(172, 172, 172), DarkGray, rgb(172, 172, 172)) !important;
}
::v-deep .vxe-table .vxe-body--row.rptnahead.row--hover td {
  background-image: linear-gradient(rgb(172, 172, 172), DarkGray, rgb(172, 172, 172)) !important;
}
.el-radio-group {
  font-size: 0;
  float: right;
}
</style>
